import React, { Component } from 'react';
import { NavBar, IndexBar, List } from 'antd-mobile'
import service from '../api'
import '../styles/City.scss'
class City extends Component {
  constructor(props) {
    super(props)
    this.state = {

      citylist: [],
      name:'',
    }
  }
  async componentDidMount() {
    var res = await service.city.city_sortCity()
    this.setState({ citylist: JSON.parse(res.data.data) })
  }
  back() {
    this.props.history.go(-1)
  }
  click(name){
    this.props.history.push({pathname:'/index/home/' ,state:{city:name}})
  }
  render() {

    return (
      <div className='city'>
        <div className="fanhui">
          <NavBar onBack={() => { this.back() }}>城市选择</NavBar>
        </div>
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {
              this.state.citylist.map((item, index) => {
                return (
                  <IndexBar.Panel
                    index={item.letter}
                    title={item.letter.toUpperCase()}
                    key={index}
                    brief={item.letter.toUpperCase()}
                  >
                    <List>
                      {item.data.map((item1, index1) => (
                        <List.Item key={index1} onClick={() => { this.click(item1.name) }}>{item1.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                )
              })}
          </IndexBar>
        </div>
      </div>
    );
  }

}

export default City;